<template>
  <view class="step-option">
    <u-button class="option-item" type="primary" plain v-if="compCurrent > 0" @click="context?.fnLastStep?.()">上一步</u-button>
    <u-button class="option-item" type="primary" plain v-if="compCurrent !== -1 && compCurrent < context?.itemList.value.length - 1" @click="context?.fnNextStep?.()">下一步</u-button>
    <u-button class="option-item" type="primary" v-else-if="compCurrent === context?.itemList.value.length - 1" @click="handlerFinishClick">完成</u-button>
  </view>
</template>
<script lang="ts">
export default {
  options:{
    virtualHost: true,
  }
}
</script>
<script setup lang="ts">
import {computed, inject, onMounted, onUnmounted, ref} from 'vue'
import type {StepContext} from "@/components/Step/type";
import UButton from "@/uni_modules/uview-plus/components/u-button/u-button.vue";
const context = inject<StepContext>('StepContext')
const compCurrent = computed(() => {
  return context?.itemList.value.findIndex(item => item.id === context?.currentIndex.value)
})
// 完成按钮点击事件
const handlerFinishClick = () => {
  context?.fnFinish?.()
}
</script>

<style lang="scss" scoped>
.step-option{
  display: flex;
  padding: 5px;
  .option-item{
    flex: 1;
    margin: 5px;
  }
}
</style>